<template>
	<view class="orderDetails">
		<TopHead :title="'确认订单'"></TopHead>
		<view class="conbox">
			<view class="box1" @click="choice">
				<AddresModel style="width: 100%;" :item="addresItem"></AddresModel>
			</view>
			<view class="info-box">
				<view class="title-dianpu">
					<!-- <uni-icons color="#E47917" type="home-filled" size="20"></uni-icons> -->
					<image class="confirmOrder-icon1" src="/static/images/confirmOrder-icon1.png"></image>
					{{goodsInfo.orderItemList[0].storeName}}
				</view>
				<view class="goods-Info">
					<view class="itemBox" v-for="(item,index) in goodsInfo.orderItemList" :key="index">
						<view class="iten-cont">
							<image class="item-img" :src="path+item.logo"></image>
							<view class="iten-cont-txt">
								<view class="title2">{{item.productEntityName}}
									<view class="title2-pic">￥<text>{{(item.price/100).toFixed(2)}}</text>
									</view>
								</view>
								<view class="title3">
									<text v-for="(ite,j) in item.tagList" :key="j">{{ite}}</text>
									<!-- <text class="num">X{{numer}}</text> -->
								</view>
					<!-- 			<view class="title4">
									<text v-for="option in item.orderItemSpecificationList"
										:key="option.id">{{option.orderItemSpecificationValueList[0].value}}(￥{{(option.orderItemSpecificationValueList[0].addPrice/100).toFixed(2)}})、
									</text>
								</view> -->
							</view>
						</view>
					</view>
					<view class="otherInfo">
						<text>
							购买数量：
						</text>
						<view class="sum-view">
							<!-- <text class="reduce add1" @click="reduce">-</text> -->
							<text class="add">x{{goodsInfo.orderItemList[0].amount}}</text>
							<!-- <text class="add1 add2" @click="addNum">+</text> -->
						</view>
					</view>
					<view class="otherInfo">
						<text>商品总价：</text>
						<view class="sum-view">￥{{(priceTotal/100).toFixed(2)}}</view>
					</view>
					<view class="otherInfo"  v-for="(item,index) in goodsInfo.orderItemList[0].orderItemSpecificationList" :key="index">
						<text>{{item.specificationName}}：</text>
			 						<view class="sum-view" >
						{{item.orderItemSpecificationValueList[0].value}}	￥{{(item.orderItemSpecificationValueList[0].addPrice/100).toFixed(2)}}
						
							</view>
					</view>
					<view class="otherInfo">
						<text>优惠券：</text>
						<view class="sum-view yhq" @click="open">
							<text
								v-if="couponItem!=null">{{couponItem.template.templateName}}￥{{(couponItem.template.templateInfo.reducePrice/100)}}</text>
							<text v-else>无</text>
							<uni-icons class="quanIcon" type="right" color="#999" size="20"></uni-icons>
						</view>
					</view>
					<view class="otherInfo">
						<text>支付方式：</text>
						<view class="sum-view">
							<radio-group @change="radioChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
									:key="item.value">

									<radio :value="item.value" style="transform: scale(.7) ;" color="#e47917"
										:checked="index === current" />
									<text :class="index === current?'active':'radioText'">{{item.name}}</text>


								</label>
							</radio-group>
						</view>
					</view>
					<view class="otherInfo beizhu">
						<text>订单备注：</text><input class="uni-input" v-model="beizhu" focus placeholder="备注" />
					</view>
				</view>

			</view>

		</view>
		<view class="btnBox">
			<view class="">
				实付：￥{{(priceTotal/100).toFixed(2)}}
			</view>
			<view class="">
				<!-- <text>共 {{numer}} 件</text> -->
				<view class="btn2" @click.stop="confirmOrder()">提交订单</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="popupBox">
				<view class="popuptitle">
					<uni-icons type="closeempty" @click="close" class="closeempty" color="#040404"
						size="20"></uni-icons>
					可用优惠券
				</view>
				<view class="quanlist">
					<view class="popup-item" v-for="(item,index) in couponList" :key="index"
						@click="choiceCoupon(item)">
						<text class="tag">店铺优惠券</text>
						<view class="numer"><text>￥</text>{{(item.template.templateInfo.reducePrice/100)||0}}</view>
						<view class="popup-item-text">
							<view>{{item.template.templateName}}</view>
							<view>有效期至：{{item.certificateEndDate}}</view>
						</view>
						<view class="syBtn">使用</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	import AddresModel from '../../components/basics/addresModel.vue';

	export default {
		components: {
			TopHead,
			AddresModel
		},
		data() {
			return {
				path: this.$http.tpUrl + '/', // 图片前缀
				items: [
					{
						value: '3',
						name: '微信',
							checked: 'true'
					},{
						value: '2',
						name: '余额',
					
					},
				],
				current: 0,
				beizhu: '',
				numer: 1, // 数量
				ProductEntityId: '', // 商品id
				selected: '', // 规格
				addresItem: {},
				couponItem: null,
				couponList: [], // 卡券列表
				goodsInfo: {}, // 商品信息
				priceTotal: 0, // 总价格
				orderId: '', // 订单号
			}
		},
		onLoad(options) {
			console.log(options)
			// this.selected = options.selected
			// this.numer = options.numer

			this.orderId = options.orderId
			this.$nextTick(() => {
				this.goodsInfoData()
			})

		},
		onShow() {
			this.userData() // 默认地址
			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			// 选择其他地址
			choice() {
				console.log('选择其他')
				let orderAddress = 1
				let paramsStr = `?orderAddress=${orderAddress}`
				uni.navigateTo({
					url: `/pages_category_page1/mine/address${paramsStr}`
				})
			},
			// 商品信息
			goodsInfoData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/order/' + _this.orderId,
					method: 'GET',
					data: {},
					success(res) {

						_this.goodsInfo = res.data
						console.log("res.data",res.data);
						// console.log(_this.goodsInfo)
						// _this.priceTotal = (res.data.price * _this.numer)
						_this.priceTotal = res.data.orderPrice
					}
				})
			},

			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				console.log(this.current,this.items[this.current])
			},

			// 减少
			reduce() {
				if (this.numer == 1) {
					uni.showToast({
						icon: 'none',
						title: '数量不能少于1',
						duration: 2000
					})

				} else {
					this.numer--
				}
				if (this.couponItem) {
					this.priceTotal = (this.goodsInfo.price * this.numer) - (this.couponItem.template.templateInfo
						.reducePrice)
				} else {
					this.priceTotal = (this.goodsInfo.price * this.numer)
				}

				console.log(this.numer)
			},
			// 加
			addNum() {
				this.numer++
				if (this.couponItem) {
					this.priceTotal = (this.goodsInfo.price * this.numer) - (this.couponItem.template.templateInfo
						.reducePrice)
				} else {
					this.priceTotal = (this.goodsInfo.price * this.numer)
				}

				console.log(this.numer)
			},
			// 优惠券弹窗
			open() {
				this.getCouponData()

			},
			close() {
				this.$refs.popup.close()
			},
			// 获取优惠券
			getCouponData() {
				let _this = this
				_this.couponList = this.goodsInfo.canUseCertificateList
				console.log(_this.couponList)
				if (_this.couponList.length > 0) {
					_this.$refs.popup.open('center')
				} else {
					uni.showToast({
						title: '暂无优惠券',
						icon: 'none'
					});
				}
			},
			// 地址
			userData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				_this.$http.fetchData({
					url: '/wechatApplet/customer/user/' + userId,
					method: 'GET',
					data: {

					},
					success(res) {
						_this.addresItem = res.data.userAddress
						console.log(res)
						console.log("_this.addresItem ",_this.addresItem );

					}
				})
			},
			// 选择优惠券
			choiceCoupon(item) {
				console.log(item)
				this.couponItem = item
				this.$nextTick(() => {
					if (this.couponItem) {
						this.priceTotal = this.goodsInfo.orderPrice - (this.couponItem.template
							.templateInfo.reducePrice)
					}
				})
				this.close()
			},
			// 下单  
			confirmOrder() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				  let payMode=_this.items[_this.current].value;
				  console.log("payMode:",payMode);
				  // if( _this.addresItem ==undefined || _this.addresItem.id==undefined){
					 //  uni.showToast({
					 //  	icon: 'none',
					 //  	title: "请设置收货地址！"
					 //  })
					 //  return;
				  // }
				 
				  var addresItemId="";
				if( _this.addresItem !=undefined && _this.addresItem.id!=undefined){
					  addresItemId=_this.addresItem.id;
				  }
				let data = {
					openId: uni.getStorageSync('openId'),
					orderId: _this.goodsInfo.orderId,
					paymentList: [{
						certificateId: _this.couponItem ? _this.couponItem.id : '', // 卡券id
						payMode: payMode, // 支付模式（1：卡券;2:余额;3：小程序微信;4:微信公众号） 
						payType: 1, // 支付类型（1：支付；2：退款） 
						price: _this.priceTotal // 支付价格 
					}],
					remark: _this.beizhu,
					userAddressId: addresItemId, // 地址id
					id: userId,

				}
							console.log("confirmOrder;data",data)
							console.log("confirmOrder;data",JSON.stringify(data));
				uni.showLoading({
					mask: true,
					title: '支付中...',
				})
				console.log(data);
				console.log(JSON.stringify(data));
				// return
				_this.$http.fetchData({
					url: '/wechatApplet/customer/pay/',
					method: 'POST',
					data: data,
					success(res) {
						uni.hideLoading()
						if (res.code == 200) {
							var payMode=_this.items[_this.current].value;
							if(payMode==2){
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								})
								setTimeout(()=>{
									uni.switchTab({
										url: `/pages/order/orderList`
									})
								},500)
							}else {
								_this.goPay(res.data[0].wxJsApiParam)
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}

						console.log(res)

					}
				})
			},
			// 吊起支付
			goPay(data) {

				let obj = {
					appId: data.appId,
					nonceStr: data.nonceStr,
					package: data.packAge,
					timeStamp: data.timeStamp,
					signType: data.signType,
					paySign: data.paySign
				}
				console.log(obj)
				uni.requestPayment({
					provider: 'wxpay',
					appId: data.appId,
					nonceStr: data.nonceStr,
					package: data.packAge,
					timeStamp: data.timeStamp,
					signType: 'MD5',
					paySign: data.paySign,
					success: function(payRes) {
						console.log('支付成功', payRes)
						uni.showToast({
							icon: 'none',
							title: '支付成功'
						})
						setTimeout(()=>{
							uni.switchTab({
								url: `/pages/order/orderList`
							})
						},500)
						
					},
					fail: function(err) {
						console.log('支付失败', err)
						uni.showToast({
							icon: 'none',
							title: '支付失败'
						})
						
						// uni.switchTab({
						// 	url: `/pages/order/orderList`
						// })

					}
				})
			},

		}
	}
</script>

<style scoped>
	.orderDetails {
		background: #f3f3f3;
	}

	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 210rpx;
		padding-bottom: 200rpx;
	}

	.box1 {
		display: flex;
	}

	.box1 .left-box1 {
		flex: 1;
	}

	.title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.title1-text {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 16rpx;
	}

	.box1 .right-icon-box {
		width: 132rpx;
		height: 102rpx;
	}

	.box1 .right-icon-box>view {
		width: 102rpx;
		height: 102rpx;
		background: linear-gradient(180deg, #e47917, #feefe2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info-box {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		padding: 24rpx;
		margin-top: 30rpx;
	}

	.title-dianpu {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		padding-bottom: 14rpx;
	}

	.confirmOrder-icon1 {
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
		margin-right: 22rpx;
	}

	.goods-Info {
		padding: 40rpx 0;
		border-top: 2rpx dashed #c7c7c7;
		/* border-bottom: 2rpx dashed #c7c7c7; */
	}

	.iten-cont {
		padding: 24rpx 0 32rpx 0;
		display: flex;
	}

	.iten-cont .item-img {
		flex-shrink: 0;
		width: 178rpx;
		height: 178rpx;
		border-radius: 10rpx;
		background-color: #f3f3f3;
	}

	.iten-cont-txt {
		padding-left: 18rpx;
		flex: 1;
	}

	.title2 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		position: relative;
		padding-right: 120rpx;
		/* overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; */
	}

	.title2 .title2-pic {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
		line-height: 52rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -26rpx;
	}

	.title2 .title2-pic text {
		font-size: 40rpx;
	}

	.title3 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #fdab34;
		margin-top: 18rpx;
		position: relative;
	}

	.title3 text {
		display: inline-block;
		line-height: 40rpx;
		background: #fff0db;
		padding: 0 18rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}

	.title3 text:first-child {
		margin-left: 0;
	}

	.title3 .num {
		line-height: 32rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -16rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		background: none;
		padding: 0;
		margin: 0;
	}

	.title4 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 12rpx;

	}

	.otherInfo {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-bottom: 24rpx;
		display: flex;
	}

	.goods-Info .otherInfo:last-child {
		margin-bottom: 0;
	}

	.otherInfo text {
		color: #c2c2c2;
		flex-shrink: 0;
	}

	.sum-view {
		flex: 1;
		text-align: right;
		color: #000;
	}

	.uni-list-cell {
		margin-left: 80rpx;
	}

	.yhq {
		color: #e47917;
	}

	.sum-view .add1 {
		width: 34rpx;
		height: 34rpx;
		box-sizing: border-box;
		display: inline-block;
		background: #ffffff;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		font-size: 22rpx;
		font-weight: 400;
		color: #000000;
		text-align: center;
	}

	.sum-view .add2 {
		background: #e47917;
		border: 2rpx solid #e47917;
		color: #fff;
	}

	.sum-view .add {
		display: inline-block;
		width: 50rpx;
		text-align: center;
		vertical-align: middle;
		color: #000;
	}

	.sum-view .active {
		color: #e47917;
	}

	.sum-view .radioText {
		color: #000;
	}

	.uni-input {
		flex: 1;
		text-align: right;
		color: #000;
	}

	.price {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		text-align: right;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.btnBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		height: 112rpx;
		padding: 0 42rpx;
		box-sizing: border-box;
		display: flex;
	}

	.btnBox>view {
		flex: 1;
		line-height: 112rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.btnBox>view:last-child {
		text-align: right;
		font-size: 24rpx;
		font-weight: 400;

	}

	.btnBox .btn1 {
		background: #e9e9e9;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #404040;
	}

	.btnBox .btn2 {
		background: #e47917;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
		line-height: 78rpx;
		width: 216rpx;
		text-align: center;
		display: inline-block;
		margin-left: 20rpx;
	}

	/* 弹窗 */
	.popupBox {
		width: 690rpx;
		height: 702rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 34rpx 24rpx;
	}

	.popuptitle {
		position: relative;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #5d4529;

	}

	.closeempty {
		position: absolute;
		left: 0rpx;
		top: 50%;
		margin-top: -20rpx;
	}

	.quanlist {
		padding: 30rpx 5rpx;
		height: 590rpx;
		overflow-y: auto;
	}

	.popup-item {
		background: #fffbf3;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		padding-left: 172rpx;
		position: relative;
		margin-bottom: 18rpx;
		display: flex;
	}

	.popup-item .tag {
		display: inline-block;
		background: #ffe6d1;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		padding: 0 16rpx;
		line-height: 42rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		position: absolute;
		top: 0;
		left: 0;
	}

	.popup-item .numer {
		font-size: 48rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #f61111;
		position: absolute;
		left: 30rpx;
		bottom: 36rpx;
	}

	.popup-item .numer text {
		font-size: 28rpx;
	}

	.popup-item .popup-item-text {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		flex: 1;
		padding-top: 47rpx;
		padding-bottom: 36rpx;
		border-right: 2rpx dashed #e67817;
	}

	.popup-item .popup-item-text>view:first-child {
		margin-bottom: 14rpx;
	}

	.popup-item .syBtn {
		width: 99rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
	}

	.quanIcon {
		display: inline-block;
		vertical-align: middle;
		margin-left: 20rpx;
	}
</style>